<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="control">
              <button>选项1</button>
              <button>选项2</button>
              <button>选项3</button>
        </div>
        <div class="content">
              <div class="box">内容1</div>
              <div class="box">内容2</div>
              <div class="box">内容3</div>
        </div>
  </div>

  <script>
    // 构造函数   
      function Foo(box,btn){
            this.box=document.querySelectorAll(box)
            this.btn=document.querySelectorAll(btn);
            
      } 
    //   事件绑定
      Foo.prototype.show=function(){
            for(let i=0;i<this.btn.length;i++){
                // 初始状态只显示第一个盒子的内容
                i!=0? this.box[i].style.display="none":1;
                // 利用箭头函数没有this使其指向最近的父元素
                this.btn[i].onclick=()=>{
                    for(let j=0;j<this.box.length;j++){
                        this.box[j].style.display="none"
                    }
                    this.box[i].style.display="block"
                }
            }
      }    
        var a=new Foo(".box",".control button")
      
        a.show()
     
      
  </script>
</body>
</html>